<template>
    <div style="margin-top: 20px;">
        <el-table :data="tableData" style="width: 100%; margin-top: 30px;" :row-style="{ height: '100px'}">
            <el-table-column
                v-for="column in columns"
                :key="column.prop"
                :prop="column.prop"
                :label="column.label"
            >
                <template #default="scope">
                    <template v-if="column.prop === 'roomImage'">
                        <img :src="getImageUrl(scope.row[column.prop])" alt="暂无图片" style="width: 100px; height: auto;" />
                    </template>
                    <template v-else-if="column.prop === 'cancel'">
                        <el-button style="background-color: brown; color: white; width: 100px;" @click="goCancel(scope.row.id)">取消</el-button>
                    </template>
                    <template v-else>
                        {{ scope.row[column.prop] }}
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 30px; display: flex; justify-content: center;">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="sizePage"
                :page-sizes="pageSize"
                :size="size"
                :disabled="disabled"
                :background="background"
                layout="total, prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus'; 
import request from "@/utils/request";
import { useRouter } from 'vue-router'
const router = useRouter();

const currentPage = ref(1); // 当前页
const sizePage = ref(5); // 每页条数
const tableData = ref([]);

const columns = ref([
    { prop: 'roomImage', label: '图片' },
    { prop: 'type', label: '房型' },
    { prop: 'peopleNum', label: '可住人数' },
    { prop: 'bedNum', label: '床位数' },
    { prop: 'price', label: '房价' },
    { prop: 'bookingTime', label: '预定时间'},
    { prop: 'leavingTime', label: '离开时间'},
    { prop: 'cancel', label: '取消'}
]);

const find = async() => {
    try {
        const userData = localStorage.getItem('admin')
        const parseData = JSON.parse(userData);
        const uid = parseData.id;
        const res = await request.get('/reservation/find', {
            params: {
                id: uid
            }
        });
        console.log(res);
        if(res.code === '0') {
            tableData.value = res.data.map(item => ({
                id: item.id,
                roomImage: item.room.roomImage,
                type: item.room.type,
                peopleNum: item.room.peopleNum,
                bedNum: item.room.bedNum,
                price: item.room.price,
                bookingTime: item.bookingTime,
                leavingTime: item.leavingTime
            }));
        } else {
            ElMessage({
            message: res.msg,
            type: 'error'
        });
        }
    } catch(error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
}

onBeforeMount(async() => {
    await find();
});

const getImageUrl = (fileName) => {
    return `http://localhost:8080/api/photo/get?fileName=${fileName}`;
}

const goCancel = async(id) => {
    try {
        console.log(id);
        const res = await request.post('/reservation/delete', {
            id: id
        });
        if(res.code === '0') {
            ElMessage({
                message: '取消成功',
                type: 'success'
            });
            setTimeout(() => {
                location.reload();
            }, 1000); // 延迟1秒刷新
        }
    } catch(error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
}

</script>

<style lang="less" scoped>

</style>